
import { PageContainer } from '@ant-design/pro-components';
import {  List, message, theme } from 'antd';
import React, { useEffect, useState } from 'react';
import {listInterfaceInfoByPageUsingGet} from "@/services/api-backend/interfaceInfoController";


const index: React.FC = () => {

  const [loading,setLoading] = useState(false);
  const [list,setList] = useState<API.InterfaceInfo[]>([]);
  const [total,setTotal] =useState<number>(0);

  const loadData=async (current=1,pageSize=7)=>{
    setLoading(true);
    try{
      const res =await listInterfaceInfoByPageUsingGet({});
      setList(res?.data?.records??[]);
      setTotal(res?.data?.total??0);
    }catch(error:any){
      message.error('请求失败，'+error.message);
    }
    setLoading(false);
  }

  useEffect(()=>{
    loadData();
  },[])

  return (
    <PageContainer title="在线接口开发平台">
      <List
        className="my-list"
        loading={loading}
        itemLayout="horizontal"
        dataSource={list}
        renderItem={item => {
          const apilink=`/interface_info/${item.id}`;
          console.log(apilink)
          return(
            <List.Item
              actions={[<a key={item.id} href={apilink}>查看</a>]}
            >
              <List.Item.Meta
                title={<a href={apilink}>{item.name}</a>}
                description={item.descpition}
              />

            </List.Item>
          );
        }}
        pagination={{

          showTotal(total:number){
            return '总数:  '+total;
          },
          pageSize:7,
          total,
          onChange(page,pageSize){
            loadData(page,pageSize);
          }
        }}
      />
    </PageContainer>
  );
}




export default index;
